<template>
    <el-dialog 
        class="select-user-dialog" 
        width="750px" 
        :visible.sync="visible" 
        :title="title" 
        :append-to-body="true"
        :close-on-click-modal="false"
        :before-close="closeDialog">
        <div class="select-member-panel">
            <div class="member-all">
                <el-tabs v-model="activeTab" class="flex-tabs">
                    <el-tab-pane label="团队" name="1">
                        <div class="member-all-wrap">
                            <div class="member-all-title">全部联系人</div>
                            <div class="member-wrap">
                                <ul>
                                    <li v-for="item of filterUser" :key="item.id" @click.stop="selectThisUser(item)">
                                        <img-show :url="item.imsUrl" :name="item.username"></img-show>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="部门" name="2">
                        <div class="member-all-wrap scroll">
                            <el-tree
                                ref="tree"
                                v-if="visible"
                                lazy
                                :load="loadNode"
                                :props="defaultProps">
                                <span class="custom-tree-node dept-node" slot-scope="{ node, data }" v-if="data.nodeType == 'dept'">
                                    <span class="label">
                                        <span class="iconfont icon-jigou"></span>
                                        {{ node.label }}
                                    </span>
                                </span>
                                <span class="custom-tree-node" slot-scope="{ node, data }" @click.stop="selectThisUser(data)" v-else>
                                    <span class="label">
                                        <img-show :url="data.imsUrl" :name="data.username"></img-show>
                                    </span>
                                </span>
                            </el-tree>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </div>
            <div class="member-arrow">
                <i class="fa fa-angle-right"></i>
            </div>
            <div class="member-selected">
                <div class="member-panel-header">
                    已选择成员 ({{ selected.length }})
                </div>
                <div class="member-panel-body">
                    <ul>
                        <li v-for="item of selected" :key="item.id">
                            <img-show :url="item.imsUrl" :name="item.username"></img-show>
                            <span class="del-btn el-icon-close" @click="deleteUser(item)"></span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div slot="footer">
            <el-button type="primary" @click="submitFun">保存</el-button>
            <el-button @click="closeDialog">取消</el-button>
        </div>
    </el-dialog>
</template>

<script>
    /**
     * @author julei
     * @date 2020-01-08
     */
    import imgShow from '@/components/avator/imgShow';
    import { transformTozTreeFormat } from '@/utils/Tools';
    import {
        initDeptTree,
        getStaffById,
        getUserBaseList
    } from "@/service/core/deptConf";
    import { mapState } from 'vuex';
    export default {
        name: 'selectUserDialog', // 弹窗选择用户 组件
        props: {
            visible: { // 是否显示
                type: Boolean,
                default: false
            },
            title: { // 标题
                default: '选择人员'
            },
            data: { // 回显的数据
                type: Array,
                default() {
                    return []
                }
            }
        },
        components: { imgShow },
        data() {
            return {
                activeTab: '1',
                teamUser: [], // 团队人员
                selected: [], // 已选人员
                defaultProps: {
                    label: 'name',
                    isLeaf: 'leaf'
                }
            }
        },
        computed: {
            ...mapState({
                token: state => state.token.token,
                deptId: state => state.token.deptId,
                deptName: state => state.token.deptName,
            }),
            filterUser() {
                return this.teamUser.filter(item => {
                    return this.selected.findIndex(sel => sel.id == item.id) == -1;
                });
            }
        },
        watch: {
            visible: {
                handler: function(val) {
                    if(val) {
                        this.activeTab = '1';
                        this.initTeamUser();
                        if(this.data.length) {
                            this.selected = [...this.data];
                        }
                    }
                },
                immediate: true
            }
        },
        methods: {
            initTeamUser() { // 团队人员
                let params = {
                    deptId: this.deptId,
                    status: 'ACTIVE',
                    columns: 'employeeNo',
                    orders: 'ASC',
                    // usernameLk: this.filterText,
                }
                getUserBaseList(params).then(res => {
                    if (res.data.code == 1000) {
                        let data = res.data.data;
                        if(Array.isArray(data)) {
                            this.teamUser = [...data];
                        }else {
                            this.teamUser = [];
                        }
                    }
                });
            },
            selectThisUser(item) { // 选择用户
                console.log(item)
                let index = this.selected.findIndex(user => user.id == item.id);
                if(index == -1) {
                    this.selected.push(item);
                }else {
                    this.selected.splice(index, 1);
                }
            },
            deleteUser(item) { // 删除用户
                let index = this.selected.findIndex(user => user.id == item.id);
                if(index > -1) {
                    this.selected.splice(index, 1);
                }
            },
            loadNode(node, resolve) {
                if(node.level == 0) {
                    let params = {
                        columns: 'path,orderNum',
                        orders: 'true,true',
                        statusId: "ACTIVE",
                    };
                    initDeptTree(params).then(res => {
                        if (res.data.code == 1000) {
                            let data = res.data.data;
                            if(Array.isArray(data)) {
                                data = data.map(item => {
                                    return {
                                        ...item,
                                        nodeType: 'dept'
                                    }
                                })
                                let nodes = transformTozTreeFormat(data); // 组装成嵌套结构的数据
                                resolve(nodes)
                            }else {
                                resolve([])
                            }
                        }
                    }).catch(error => {
                        resolve([]);
                    })
                }else {
                    let children = node.data.children || [];
                    let params = {
                        deptId: node.data.id,
                        status: 'ACTIVE',
                        columns: 'employeeNo',
                        orders: 'ASC',
                    }
                    getUserBaseList(params).then(res => {
                        if (res.data.data) {
                            let data = res.data.data;
                            if(Array.isArray(data)) {
                                data = data.map(item => {
                                    return {
                                        ...item,
                                        name: item.username,
                                        nodeType: 'user',
                                        leaf: true
                                    }
                                })
                                resolve([...children, ...data])
                            }else {
                                resolve([...children])
                            }
                        }
                    }).catch(error => {
                        resolve([]);
                    })
                }
            },
            closeDialog() {
                this.selected = [];
                this.$emit('update:visible', false);
            },
            submitFun() {
                this.$emit('update', this.selected);
                this.closeDialog();
            },
        }
    }

</script>

<style lang="scss">
.select-user-dialog {
    .select-member-panel {
        height: 360px;
        display: flex;
        .member-all {
            flex: 1;
            display: flex;
            flex-direction: column;
            padding: 0 3px 3px;
            border: 1px solid #eaeff1;
            border-radius: 5px;
            overflow: hidden;
            .member-all-wrap {
                height: 100%;
                display: flex;
                flex-direction: column;

                &.scroll {
                    overflow: auto;
                }

                .member-all-title {
                    padding: 0 10px 10px;
                    font-size: 12px;
                    color: #999;
                }

                .member-wrap {
                    flex: 1;
                    padding: 0 10px;
                    overflow: auto;
                    ul li {
                        cursor: pointer;
                        padding: 2px 5px;
                        margin-bottom: 5px;
                        &:hover {
                            background: #F5F7FA;
                        }
                    }
                }

                .el-tree {
                    .el-tree-node__content {
                        height: 45px;
                        .custom-tree-node {
                            display: inline-block;
                            min-width: 250px;
                            &.dept-node {
                                font-size: 16px;
                            }
                        }
                    }
                }
            }
        }
        .member-arrow {
            width: 50px;
            text-align: center;
            line-height: 360px;
            font-size: 22px;
        }
        .member-selected {
            flex: 1;
            display: flex;
            flex-direction: column;
            padding: 0 3px;
            border: 1px solid #eaeff1;
            border-radius: 5px;
            overflow: hidden;
            .member-panel-header {
                line-height: 40px;
                padding: 0 10px;
            }

            .member-panel-body {
                flex: 1;
                overflow: auto;
                padding: 0 10px;
                ul li {
                    position: relative;
                    cursor: pointer;
                    padding: 2px 30px 2px 5px;
                    margin-bottom: 5px;
                    &:hover {
                        background: #F5F7FA;
                    }

                    .del-btn {
                        position: absolute;
                        top: 50%;
                        right: 10px;
                        transform: translate(0, -50%);
                        font-size: 18px;
                    }
                }
            }
        }
    }
}
</style>
